// 创建类收集依赖
class Depend {
    constructor() {
        this.reactiveFns = []
    }
    addDepend(fn) {
        if (fn) {
            this.reactiveFns.push(fn)
        }
    }
    notify() {
        this.reactiveFns.forEach(fn => {
            fn()
        })
    }
}
const obj = {
    name: "ran",
    age: 18
}

// 创建类
const dep = new Depend()
function watchFn(fn) {
    dep.addDepend(fn)
    fn()
}
// 方案一：Object.defineProperty() vue2
Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
        set: function (newValue) {
            value = newValue
            dep.notify()
        },
        get: function () {
            return value
        }
    })
})
watchFn(function foo() {
    console.log("foo:", obj.name);
    console.log("foo:", obj.age);
    console.log("foo function",);
})

watchFn(function bar() {
    console.log("bar:", obj.name + "hello");
    console.log("bar:", obj.age + 10);
    console.log("bar function",);
})

console.log("name发生变化-------------");
obj.name = "kobe"
console.log("age发生变化--------------");
obj.age = 10
console.log("name再次变化--------------");
obj.name = "bill"